<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>校长信箱-云校通-家长</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart>
	<div class="xc_hd">
		<div class="weui_tab_bd" style="padding-bottom:0;">
			<div class="weui_cells weui_cells_form" style="margin-top:0;">
	            <div class="weui_cell">
	                <div class="weui_cell_bd weui_cell_primary">
	                    <textarea id="problem" class="weui_textarea" placeholder="请输入内容……" rows="5"></textarea>
	                </div>
	            </div>
	            <div class="weui_uploader">
                       <div class="weui_uploader_bd">
                            <ul class="weui_uploader_files img-click" id="img1">
	                        </ul>
	                        <div class="weui_uploader_input_wrp" id="filePicker" style="margin-bottom: 20px; margin-left: 15px; width: 60px; height: 60px; border-radius: 5px;">
	                           
	                        </div>
                       </div>
                   </div>
	        </div>
	        
	        <div class="weui_btn_area" id="mailbox-addBtn">
		        <a href="javascript:" class="weui_btn bg-blue">确认发送</a>
		    </div>
			
		</div>
	</div>
	
    <div class="weui_cell lblue ly-lsjl-title">
        <div class="weui_cell_bd weui_cell_primary">
            <p class="f-blue bold">历史记录</p>
        </div>
    </div>
    <div class="weui_panel weui_panel_access" style="margin-bottom: 55px;margin-top:0;">
    	<div class="weui_panel_bd moments" id="mailboxList"></div>
    </div>
	<script id="mailbox-table-template" type="text/x-handlebars-template">
		{{#each rows}}
		<div class="weui_panel_bd">
           <div class="weui_cell">
            	<div class="weui_cell_hd">
            		<img alt="" class="circle bg-blue-b" style="width:50px;margin-right:10px;display:block" src="${config.imgUrl}/{{headImgUrl}}">
            	</div>
            	<div class="weui_cell_bd weui_cell_primary">
                	<p>{{parentName}}</p>
            	</div>
        	</div>
            <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
               
               <div class="weui_media_bd">
				   <p class="paragraph f-14 pr10" style="line-height: 25px;">{{problem}}</p>
			       <!-- 伸张链接 -->
			       <span class="paragraphExtender f-blue">全文</span>
                   {{#if attachList}}
				   <div class="weui-flex img-click">
						<div class="mailbox">
						{{#each attachList}}
                   			<img onclick="imgClick(this)" src="${config.imgUrl}{{attachmentUrl}}">
                   		{{/each}}
						</div>
                   </div>
				   {{/if}}
                   <p class="weui_media_desc" style="line-height: 2;">
                   		{{dateFormat createTime}}
                   </p>
				   {{#if isReply}}
                   <div class="liketext"><p class="f-black repay_line"><span class="f-blue">{{teacherName}}：</span>{{reply}}</p></div>
				   {{/if}}
				</div>
            </a>
       </div>
	   {{/each}}
	</script>
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script>
	$(function() {
		loadAudited();
		$("#mailbox-addBtn").click(function(){
       		var problem = $("#problem").val();
       		if(problem.trim().length == 0) {
       			$.alert("请输入内容","");
       			return;
       		}
       		var attachIds = new Array();
       		$("#img1 .thumbnail").each(function(i, v) {
       			attachIds.push($(v).attr("data-id"));
       		});
       		$.confirm("确认提交校长信箱?", "", function() {
       			$.ajax({
                  	url : basePath + "/xs/mailbox/principal/create",
          	 		type : "post",
          	 		dataType : "json",
          	 		data : {
          	 			problem: problem,
          	 			ids: attachIds.toString()
          	 		},
                    success: function(data){
                    	if(data.code == '000') {
                    		$.toast("校长信箱提交成功！");
                    		setTimeout(function() {window.location.reload();}, 1000);
                    	}else {
                    		$.alert(data.msg);
                    	}
                    },
                    error: function(xhr, type){
                      
                    }
                 });
            }, function() {
            });
        })
		
	})
	function loadAudited() {
		//页数 
	    var page = 0;
	    // 每页展示5个
	    var size =5;
	    $('.weui_panel').dropload({
	        scrollArea : window,
	        autoLoad : true,//自动加载
	        domUp : {//下拉
	            domClass   : 'dropload-up',
	            domRefresh : '<div class="dropload-refresh"><i class="icon icon-114"></i>上拉加载更多</div>',
	            domUpdate  : '<div class="dropload-load f15"><i class="icon icon-20"></i>释放更新...</div>',
	            domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>'
	        },
	        loadDownFn : function(me){//加载更多
		        page++;
				window.params = {
					page: page,
		  	 		rows: size,
		  	 		parentId: "${user.parent.id}"
				};	            
		       	$.ajax({
		          	url : basePath + "/mailbox/principal/page/query",
		  	 		type : "post",
		  	 		dataType : "json",
		  	 		data : window.params,
		            success: function(data){
		         		 if(data.rows.length == 0 || window.params.page*window.params.rows >= data.total) {// 如果没有数据
		                      // 锁定
		                      me.lock();
		                      // 无数据
		                      me.noData();
		                  }
		                  // 为了测试，延迟1秒加载
		                  setTimeout(function(){
		                	loadMailboxHtml(data);
		                	paragraph1();
		                    var lazyloadImg = new LazyloadImg({
					            el: '.weui-updown [data-img]', //匹配元素
					            top: 50, //元素在顶部伸出长度触发加载机制
					            right: 50, //元素在右边伸出长度触发加载机制
					            bottom: 50, //元素在底部伸出长度触发加载机制
					            left: 50, //元素在左边伸出长度触发加载机制
					            qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
					            load: function(el) {
					                el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
					            },
					            error: function(el) {
					
					            }
					        });
		                    // 每次数据加载完，必须重置
		                     me.resetload();
		                  },200);
		              },
		              error: function(xhr, type){
		              }
		          });
	        }
	    });
	}
	function loadMailboxHtml(data){
  		if(data.rows.length > 0) {
  			var myTemplate = Handlebars.compile($("#mailbox-table-template").html());
  			Handlebars.registerHelper("equal", function(v1,v2,options) {
  				if(v1 == v2) {
  					//满足添加继续执行
  					return options.fn(this);
  				}else {
  					//不满足条件执行{{else}}部分
  					return options.inverse(this);
  				}
  			});
  			Handlebars.registerHelper("dateFormat", function(v1) {
  				return getTime(v1, "yyyy-MM-dd hh:mm:ss");
  			});
  			$('#mailboxList').append(myTemplate(data));
  		}
	}
	
	//拍照或从手机相册中选图接口
    $('#filePicker').on('click', function () {
        wx.chooseImage({
            count: 9,
            needResult: 1,
            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
           		var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
           		wxuploadImage(localIds);
            },
            fail: function (res) {
                alterShowMessage("操作提示", JSON.stringify(res), "1", "确定", "", "", "");
            }

        });
    });
	function wxuploadImage(localIds) {  
		var localId = localIds.pop();
        wx.uploadImage({  
            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得  
            isShowProgressTips: 1, // 默认为1，显示进度提示  
            success: function (res) {  
                mediaId = res.serverId; // 返回图片的服务器端ID
                wechatMediaDownload(mediaId);
                if(localIds.length > 0){
                	wxuploadImage(localIds);
                }
            },  
            fail: function (error) {  
                alert(Json.stringify(error));  
            }  
        });
   }  
   function wechatMediaDownload(mediaId) {
	   	var params = {};
	   	params.mediaId = mediaId;
        params.attachmentType = "image";
        params.relationType = "${relationType}";
        $.ajax({
	 		url : basePath + "/xs/attchment/upload/wx",
	 		type : "post",
	 		data : params,
	 		dataType : "json",
	 		async : false,
	 		success : function(data) {
	 			if(data.code != '000') {
	 				$.toast(data.msg, "cancel");
	 			}else {
	 				$('#img1').append('<li class="weui_uploader_file thumbnail" data-id="'+data.data.id+'" style="margin-right:0;margin-bottom:16px;position: relative;"><div class="img-del" onclick="imgDel(this)"><span class="icon icon-26"></span></div><img onclick="imgClick(this)" src="'+ imgUrl + data.data.attachmentUrl +'"/></li>');
	 			}
	 		}, error:function(){
	 			alert("上传异常");
      			}
	 	});
   }
   
</script>
</html>